<template>
	<view v-show="show" class="login" :style="{ '--colorPrimary': color.primary}">
		<view class="body">
			<view class="welcome" v-if="tab==0">
				<view class="text-center">
					<iconfont :color="color.primary" icon="icon-yaoqingxin" size="40" />
				</view>
				<view class="text-center pd-5 font-bold font-size-14">
					<text>{{$t('报名说明')}}</text>
				</view>
				<view class="text-center pd-5 font-size-12">
					<text>{{$t('老用户请通过电话号码登录,有新用户就通过微信登录')}}</text>
				</view>
				<view class="btns">
					<view class="btn phone" @click="tab=1">
						<view class="item">{{$t('手机号')}}</view>
					</view>
					<view class="btn wechat" @click="autoWxLogin">
						<text>{{$t('微信登录')}}</text>
					</view>
				</view>

			</view>
			<view class="welcome" v-if="tab==1">
				<view class="text-center">
					<iconfont :color="color.primary" icon="icon-mine" size="40" />
				</view>
				<view class="text-center pd-5 font-bold font-size-14">
					<text>{{$t('手机号登录')}}</text>
				</view>
				<view class="form-area mg-top-10">
					<!-- 原密码 -->
					<view class="input-group">
						<view class="input-wrapper">
							<input class="input" type="text" v-model="param.userName" :placeholder="$t('请输入手机号')" />
						</view>
					</view>
					<view class="input-group">
						<view class="input-wrapper">
							<input class="password-input" type="password" :password="true" v-model="param.password"
								:placeholder="$t('请输入密码')" />
						</view>
					</view>
				</view>
				<view class="btns">

					<!-- #ifdef H5 -->

					<view class="btn phone" @click="loginSubmitAccond()">
						<view class="item">{{$t('登录')}}</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN  -->

					<view class="btn phone" @click="loginSubmitAccondMini()">
						<view class="item">{{$t('登录')}}</view>
					</view>
					<!-- #endif -->
					<view class="btn wechat" @click="autoWxLogin">
						<text>{{$t('微信登录')}}</text>
					</view>
				</view>
			</view>
			<view class="welcome" v-if="tab==2">
				<view class="text-center">
					<button :plain="true" style="border: none;" open-type="chooseAvatar" @chooseavatar="chooseAvatar"
						class="btn-no">
						<view class="avatar" style="line-height: 50px;" v-if="errorAvatar">
							<iconfont :color="color.primary" icon="icon-huanzhexuanzhong" size="30" />
						</view>
						<image v-else class="avatar" size="60" randomBgColor :random-bg-color="true"
							@error="getAvatarErrorImage" :src="userInfo.avatar">
						</image>
					</button>
				</view>
				<view class="text-center pd-5 font-bold font-size-14">
					<text>{{$t('微信头像')}}</text>
				</view>
				<view class="form-area mg-top-10">
					<!-- 原密码 -->
					<view class="input-group">
						<view class="input-wrapper">
							<input class="input" @input="nicNameInput" @blur="nicNameInput" @change="nicNameInput"
								type="nickname" v-model="nickname" :placeholder="$t('请输入姓名')" />
						</view>
					</view>

				</view>
				<view class="btns">

					<view class="btn phone" @click="myNickEdit()">
						<view class="item">{{$t('提交')}}</view>
					</view>
				</view>
			</view>
			<view class="welcome" v-if="tab==3">
				<view class="text-center">
					<iconfont :color="color.primary" icon="icon-shengyin" size="40" />
				</view>
				<view class="text-center pd-5 font-bold font-size-14">
					<text>{{$t('通知')}}</text>
				</view>
				<view class="text-center">
					<text>{{$t('不跟导向直接使用系统,如果你对导引的二维码扫一扫了,然后继续作')}}</text>
				</view>

			</view>
	

		</view>
	</view>

	</view>
</template>

<script>
	import {
		login,
		loginAccount,
		loginAccoundMini,
		loginAccoundMiniOpen,
		wxMiniCreate
	} from '../../api/oauth'
	import {
		changeAvatar,
		nickEdit
	} from '../../api/user';

	export default {
		data() {
			var userInfo = uni.getStorageSync('userInfo') || {
				avatarUrl: "",
				nickName: "",
				openId: "",
				auth: false,
				parentUser: {
					id: 0,
					avatar: "",
					nickname: "",
					name: ""
				},
				agent: {
					id: 1,
					name: ""
				}
			};
			return {
				userInfo,
				tab: 0,
				show: false,
				param: {
					userName: "",
					password: ""
				},
				errorAvatar: false,
				nickname: userInfo.nickName
			}
		},
		mounted() {
			console.log("KKKKKKKKKKKKK");
			var the = this;
			var flag = false;
			//userUpdate
			uni.$on('userUpdate', function(data) {
				//	console.log('监听到事件来自 update ，携带参数 msg 为：', data);
				the.userInfo = data;
				the.openDilaog()
				flag = true;
			})
			uni.$on('userUpdateError', function() {
				//	console.log('监听到事件来自 update ，携带参数 msg 为：', data);

				the.openDilaog()
				flag = true;
			})
			//netWorkInfo
	/* 		uni.$on('netWorkInfoError', function() {
				console.log('监听到事件来自 netWorkInfoError ，携带参数 msg 为：');
				the.tab = 4
				flag = true;
			}) */
			if (flag == false) {
				setTimeout(function() {
						uni.$emit('loginValid')
							console.log("loginValid2")
					the.openDilaog()
				}, 5000)
			}



		},
		methods: {
			openDilaog: function() {
				console.log("Login---02")
				var the = this;
				var info = uni.getStorageSync("Authorization")
				console.log(!info)
				if (!info) {
					console.log("Info01")
					the.show = true;
				} else {

					if (the.userInfo.avatar == '' || the.userInfo.nickName == '') {
						the.tab = 2
						the.show = true;
					}else{
							the.show = false;
					}
					the.nickname = this.userInfo.nickName;
				}
			},
			sendData: function() {
				console.log(this.param.userName, this.param.password)

			},
			chooseAvatar: function(e) {
				const {

					avatarUrl

				} = e.detail
				console.log(avatarUrl)
				var the = this;
				changeAvatar(avatarUrl).then(res => {
					console.log(res)
					the.userInfo.avatar = res.url
					uni.setStorageSync("userInfo", the.userInfo)
				})
			},
			login: function(e) {
				var the = this
				console.log("Login")
				//	this.$refs.form1.setRules(this.rules);
				//	let pages = getCurrentPages(); //获取所有页面栈实例列表
				//	let nowPage = pages[pages.length - 1]; //当前页页面实例
				//	let prevPage = pages[pages.length - 2]; //上一页页面实例
				//prevPage.$vm.detailList.receive = item; //修改上一页data里面的地址
				///	console.log("pages", nowPage, prevPage)


				// 获取用户信息
				uni.getUserProfile({
					provider: "weixin",
					lang: 'zh_CN',
					desc: this.$t("确认才能正常试用有些功能"),
					success: function(infoRes) {
						console.log(infoRes)
						var userinfo = infoRes.userInfo;
						the.userInfo = userinfo;
						var param = {
							encryptedData: infoRes.encryptedData,
							iv: infoRes.iv
						};
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								var code = loginRes.code;
								param['code'] = code
								console.log(param);
								var a = login(param)
								a.then(res => {
									uni.removeStorageSync("parentUserId")
									uni.setStorageSync("userInfo", res)
									uni.setStorageSync("Authorization", res.token)
									uni.reLaunch({
										url: "/pages/index/index"
									})
									/* 	uni.navigateBack({
											delta: 1,
											success: function() {
												prevPage.onLoad()
											}
										}) */
									/* 	uni.reLaunch({
											url: "/pages/index/index"
										}) */
								})
							}
						})
					},
					fail: (e) => {
						console.log(e)
					}
				});

			},
			loginSubmitAccond: function() {
				var param = this.param;

				//	uni.$u.toast(this.$t('校验通过'))
				console.log(res)
				var a = loginAccount(param.userName, param.password)
				a.then(res => {
					uni.removeStorageSync("parentUserId")
					uni.setStorageSync("userInfo", res)
					uni.setStorageSync("Authorization", res.token)
					uni.reLaunch({
						url: "/pages/index/index"
					})
				})

			},
			loginSubmitAccondMini: function() {
				var param = this.param;
				const phoneRegExp = /^1[3-9]\d{9}$/;
				if (!phoneRegExp.test(this.param.userName)) {
					uni.showToast({
						title: this.$t('手机号格式不正确'),
						icon: 'none'
					});
					return;
				}
				if (this.param.password.length < 6) {
					uni.showToast({
						title: this.$t('密码长度不能小于{0}位', [6]),
						icon: 'none'
					});
					return;
				}
				var the = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						var code = loginRes.code;
						param['code'] = code
						console.log(param);
						var a = loginAccoundMiniOpen(param)
						a.then(res => {
							uni.removeStorageSync("parentUserId")
							uni.setStorageSync("userInfo", res)
							uni.setStorageSync("Authorization", res
								.token)
							uni.reLaunch({
								url: "/pages/index/index"
							})
							/* 	uni.navigateBack({
									delta: 1,
									success: function() {
										prevPage.onLoad()
									}
								}) */
							/* 	uni.reLaunch({
									url: "/pages/index/index"
								}) */
						})
					}
				})



			},
			autoWxLogin: function() {
				var the = this;
				var parentUserId = uni.getStorageSync("parentUserId") || 0;
				if (parentUserId == 0) {
					the.tab = 3;
				} else {
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							var code = loginRes.code;
							///	param['code'] = code
							//	console.log(param);
							var a = wxMiniCreate(code)
							a.then(res => {
								the.show = true;
								the.nickname = res.nickName;
								uni.removeStorageSync("parentUserId")
								uni.setStorageSync("userInfo", res)
								uni.setStorageSync("Authorization", res.token)
								uni.$emit('userUpdate', res)
								/* 	uni.reLaunch({
										url: "/pages/index/index"
									}) */
								the.tab = 2

							}).catch(res => {
								console.log(res)
							})
						}
					})
				}
			},
			getAvatarErrorImage: function(e, n) {
				console.log("KKKKKKKKKKKKKKK");
				console.log(e, n)
				this.errorAvatar = this;
			},
			myNickEdit() {
				var param = {
					nickname: this.nickname
				}
				console.log(param)
				nickEdit(param).then(res => {
					uni.reLaunch({
						url: "/pages/index/index"
					})
				}).catch(e => {
					uni.showToast({
						title: this.$t('操作失败'),
						icon: 'none'
					});
				})
			},
			nicNameInput: function(e) {
				var value = e.detail.value;
				console.log(value)
				this.nickname = value
			}

		}
	}
</script>

<style lang="scss">
	.login {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 9999;
		background-color: #00000090;

		.body {
			width: 80%;
			padding: 20px;
			background-color: #eee;
			margin: 0 auto;
			margin-top: 40%;
			border-radius: 10px;

			.welcome {

				.btns {
					margin-top: 20px;

					.btn {

						color: #fff;
						width: 90%;
						margin: 0 auto;
						padding: 13px;
						border-radius: 10px;
						text-align: center;
						margin-bottom: 20px;
						font-size: 14px;
						display: flex !important;


						&.phone {

							background-color: var(--color-primary);
						}

						&.wechat {
							background-color: #00b042;
						}

						.item {
							flex: 1;
						}
					}
				}

			}
		}

	}

	.eye-icon {
		width: 40rpx;
		height: 40rpx;
		padding-left: 20rpx;
	}

	.form-area {
		display: flex;
		flex-direction: column;
		gap: 40rpx;
	}

	.input-group {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.input-label {
		font-size: 12px;
		color: #666666;
	}

	.input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 30rpx;
		height: 96rpx;
		direction: ltr;
	}

	.input {
		flex: 1;
		height: 96rpx;
		font-size: 12px;
	}

	.password-input {
		flex: 1;
		height: 96rpx;
		font-size: 12px;
	}

	.btn-no {

		outline: none;
		list-style: none;
		border: none;
		box-sizing: content-box;
		background-color: transparent;
		outline-style: none;
		margin: 0;
		padding: 0;
		width: 120upx;
		height: 120upx;
		margin: 0 auto;
	}

	.btn-no:after {
		border: none;

	}

	.img {
		height: 25px;
		width: 100%;
		margin-top: -26px;
	}

	.avatar {
		width: 120upx;
		height: 120upx;
		border-radius: 100%;
		border: 5px var(--color-primary) solid;

	}
</style>